<template>
  <div class="empty_page">
    <img src="@/assets/img/pic_notice_wrong.png">
    <p>{{str}}</p>
    <span @click="closePage">关闭</span>
  </div>
</template>

<script>
export default {
  name: 'EmptyPage',
  props: {
    str: {
      type: String,
      default: '该资源不存在，请与管理员联系'
    }
  },
  methods: {
    closePage() {
      this.$emit('closePage') // 关闭空白页面事件
      this.$store.dispatch('delCurrentViews', this.$route).then(() => {
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="less" scope>
  .empty_page{
    text-align:center;
    color:#333;
    padding-top: 10%;
    width: 100%;
    img{
      margin:0 auto;
    }
    p{
      font-size: 16px;
      margin:26px 0 20px 0;
    }
    span{
      display: block;
      width:78px;
      line-height: 30px;
      border-radius: 2px;
      font-size: 14px;
      border: solid 1px #dbe1e8;
      margin:0 auto;
      cursor:pointer;
    }
  }
</style>
